<template>
  <div class="company  flex-column flex-sub">
    <div class="flex-row justify-between align-center">
      <div class="flex">
        <custom-button class="pd-right-20" @click="handleAdd" title="新建档案" />
        <custom-button title="删除" />
      </div>
      <div>
        <el-input
          v-model="pageInfo.keyword"
          placeholder="请输入搜索条件"
          @keyup.enter.native="getCompanyData"
        >
          <i class="el-icon-search el-input__icon" slot="suffix" @click.stop="getCompanyData"></i>
        </el-input>
      </div>
    </div>
    <div class="flex-sub table-container">
      <el-table
        :data="tableData"
        height="98%"
        header-cell-class-name="table-header-cell"
        header-row-class-name="table-header-row"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="name" label="企业名称"></el-table-column>
        <el-table-column prop="industry" label="所需行业"></el-table-column>
        <el-table-column label="联系方式">
          <template slot-scope="scope">
            <span>
              <svg-icon icon-class="cellphone" />
              {{scope.row.phone}}
            </span>
            <span class="pd-left-10">
              <svg-icon icon-class="portrait" />
              {{scope.row.linkman}}
            </span>
            <div class="w-100P">
              <svg-icon icon-class="telphone" />
              {{scope.row.telephone}}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="标签">
          <div slot-scope="scope" class="text-ellipsis">
            <span v-for="(label,i) in scope.row.label" :key="i">{{label}},</span>
          </div>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template>
            <span class="btn-edit" @click="handleUpdate">修改</span>
            <span class="pd-lr-10 fz-14" style="color: #333;">|</span>
            <span class="btn-delete">删除</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <edit-dialog
      :dialogTitle="dialogTitle"
      :isShow="isShow"
      @close="handleCloseDialog"
    ></edit-dialog>
  </div>
</template>

<script>
import EditDialog from './components/edit-dialog.vue'
export default {
  components: {
    EditDialog,
  },
  data() {
    return {
      dialogTitle: '新建档案',
      isShow: false,
      pageInfo: {
        keyword: '',
        pageSize: 10,
        pageNo: 1,
      },
      tableData: [
        {
          name: '测试企业',
          phone: '188888888',
          linkman: '李先生',
          telephone: '0756-22367822',
          industry: '互联网',
          label: [
            '物联网',
            '数字孪生',
            '物联网',
            '数字孪生',
            '物联网',
            '数字孪生',
            '数字孪生',
            '物联网',
            '数字孪生',
            '物联网',
            '数字孪生',
            '数字孪生',
            '物联网',
            '数字孪生',
            '物联网',
            '数字孪生',
          ],
        },
      ],
    }
  },
  methods: {
    getCompanyData() {},
    handleCloseDialog() {
      this.isShow = false
    },
    handleAdd() {
      this.dialogTitle = '新建档案-园区企业'
      this.isShow = true
    },
    handleUpdate() {
      this.dialogTitle = '修改档案-园区企业'
      this.isShow = true
    },
  },
}
</script>

<style lang="scss" scoped>
.company {
  padding: vw(20px) vh(20px);
}

.btn-edit {
  color: #0084ee;

  &:hover {
    cursor: pointer;
    opacity: 0.7;
  }
}

.btn-delete {
  color: #d12d1f;

  &:hover {
    cursor: pointer;
    opacity: 0.7;
  }
}
</style>
